<template>
	<view class="home">

		<!--头像区域-->
		<view class="header">

			<view v-if="seen" class="header_left">
				<image :src="products.avatar"></image>
			</view>

			<view class="header_left" v-else>
				<image src="/pagesA/static/img/Vector.png"></image>
			</view>

			<view v-if="seen" style="display: flex;width: 100%;">
				<view class="header_right">


					<view class="" v-if="is_rz">
						<view><text style="color: #4D4D4D;font-size: 20px;"><strong>{{ products.nickname
						}}</strong></text>
						</view>

						<view class="iconfont icon-daifahuo" style="margin-top: 8px; margin-left: 3px;color: #F14399;">
						</view>

						<view
							style="margin-left: 5px;color: #4D4D4D;font-size: 10px;border: 1px solid #007AFF;border-radius:3px;">
							<text style="color: #007AFF;">已实名认证 </text>
						</view>
					</view>

					<view class="" v-else>

						<view><text style="color: #4D4D4D;font-size: 20px;"><strong>{{ products.nickname
						}}</strong></text>
						</view>
						<view class="iconfont icon-daifahuo" style="margin-top: 8px; margin-left: 3px;color: #F14399;">
						</view>

						<view
							style="margin-top: 15px;margin-left: 5px;color: #4D4D4D;font-size: 10px;border: 1px solid #007AFF;border-radius:3px;">
							<text style="color: #007AFF;">未实名认证</text>
						</view>
					</view>

				</view>

				<view class="iconfont icon-jinrujiantou" style="margin-top: 40px;margin-left: 15px;" @click="zl_edit()">
					<text style="color: #4D4D4D;font-size: 14px;margin-left: 5px;"><strong>修改</strong></text>
				</view>

			</view>

			<view class="header_right" @click="denglu()" v-else>
				<view class="" style="display: flex;">
					<view><text style="color: #4D4D4D;font-size: 20px;"><strong>登录/注册</strong></text></view>
				</view>
				<view style="margin-top: 15px;color: #4D4D4D;font-size: 14px;"><text>开启你的缘分之旅</text></view>
			</view>
		</view>
		<!--我喜欢列表-->
		<view class="middle">
			<view class="middle_c" @click="love_me">
				<view class="myicon">
					<image src="/static/icon/xihuan.png"></image>
				</view>
				<view style="margin-top: 5px;"><text style="font-size: 14px;color: #4D4D4D;">喜欢我的</text></view>
			</view>

			<view class="middle_c" @click="love_he">
				<view class="myicon">
					<image src="/static/icon/xihuan2.png"></image>
				</view>
				<view><text style="font-size: 14px;color: #4D4D4D;">我喜欢的</text></view>
			</view>

			<view class="middle_c" @click="love_each">
				<view class="myicon">
					<image src="/static/icon/xq.png"></image>
				</view>
				<view><text style="font-size: 14px;color: #4D4D4D;">相互喜欢</text></view>
			</view>

		</view>
		<!--资料详情-->
		<view class="zl_down" style="margin-top: 10px;">

			<view class="zl_c" @click="zl_rz()">
				<view class="myicon2">
					<image src="/static/icon/card.png"></image>
				</view>
				<view class="zl_c_d"><text style="font-size: 14px;color: #4D4D4D;">实名认证</text></view>
				<view class="zl_c_e">
					<view class="iconfont icon-jinrujiantou"></view>
				</view>
			</view>

			<view class="zl_c" @click="zl_hn()">
				<view class="myicon2">
					<image src="/static/icon/hn.png"></image>
				</view>
				<view class="zl_c_d"><text style="font-size: 14px;color: #4D4D4D;">红娘服务</text></view>
				<view class="zl_c_e">
					<view class="iconfont icon-jinrujiantou"></view>
				</view>
			</view>

			<view class="zl_c" @click="zl_pp()">
				<view class="myicon2">
					<image src="/static/icon/pipei.png"></image>
				</view>
				<view class="zl_c_d"><text style="font-size: 14px;color: #4D4D4D;">匹配需求</text></view>
				<view class="zl_c_e">
					<view class="iconfont icon-jinrujiantou"></view>
				</view>
			</view>

			<view class="zl_c" @click="zl_kf()">
				<view class="myicon2">
					<image src="/static/icon/kefu.png"></image>
				</view>
				<view class="zl_c_d"><text style="font-size: 14px;color: #4D4D4D;">添加客服</text></view>
				<view class="zl_c_e">
					<view class="iconfont icon-jinrujiantou"></view>
				</view>
			</view>

			<view class="zl_c" @click="zl_hb()">
				<view class="myicon2">
					<image src="/static/icon/xq.png"></image>
				</view>
				<view class="zl_c_d"><text style="font-size: 14px;color: #4D4D4D;">相亲卡</text></view>
				<view class="zl_c_e">
					<view class="iconfont icon-jinrujiantou"></view>
				</view>
			</view>

			<!-- <view v-if="this.type === 2">
				<view class="zl_c" @click="hn_haibao()">
					<view class="myicon2">
						<image src="/static/icon/hb.png"></image>
					</view>
					<view class="zl_c_d"><text style="font-size: 14px; color: #4D4D4D;">红娘海报</text></view>
					<view class="zl_c_e">
						<view class="iconfont icon-jinrujiantou"></view>
					</view>
				</view>
			</view> -->

			<view class="zl_c" @click="zl_vip()">
				<view class="myicon2">
					<image src="/static/icon/vip.png"></image>
				</view>
				<view class="zl_c_d"><text style="font-size: 14px;color: #4D4D4D;">VIP服务</text></view>
				<view class="zl_c_e">
					<view class="iconfont icon-jinrujiantou"></view>
				</view>
			</view>

			<view v-if="this.type === 1">
				<view class="zl_c" @click="apply_hn()">
					<view class="myicon2">
						<image src="/static/icon/card.png"></image>
					</view>
					<view class="zl_c_d"><text style="font-size: 14px;color: #4D4D4D;">成为红娘</text></view>
					<view class="zl_c_e">
						<view class="iconfont icon-jinrujiantou"></view>
					</view>
				</view>
			</view>

			<view v-if="this.type === 2">
				<view class="zl_c" @click="my_team()">
					<view class="myicon2">
						<image src="/static/icon/team.png"></image>
					</view>
					<view class="zl_c_d"><text style="font-size: 14px;color: #4D4D4D;">我的团队</text></view>
					<view class="zl_c_e">
						<view class="iconfont icon-jinrujiantou"></view>
					</view>
				</view>

				<view class="zl_c" @click="tixian()">
					<view class="myicon2">
						<image src="http://xlnc.oss-cn-shenzhen.aliyuncs.com/uploads/qianbao.jpg"></image>
					</view>
					<view class="zl_c_d"><text style="font-size: 14px; color: #4D4D4D;">我的奖励</text></view>
					<view class="zl_c_e">
						<view class="iconfont icon-jinrujiantou"></view>
					</view>
				</view>
			</view>

		</view>

		<view v-if="seens" @click="colse_weixin"
			style="background-color: #fff;width: 343px;height: 450px;position:fixed;top:100px;left:20px;border-radius: 10px;box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);text-align: center;">
			<view class="" style="margin-top: 17px;">
				<text style="color: #F14399;font-size: 18px;">联系客服</text>
			</view>

			<image src="/pagesA/static/tab_img/touxiang.png" mode=""
				style="margin-top: 17px;width: 80px;height: 80px;border-radius:50%;margin-left: 3px;">
			</image>
			<view class="" style="margin-top: 5px;">
				<text style="font-size: 14px;">{{ products.phone }}</text>
			</view>
			<view class="" style="margin-top: 27px;border-radius: 10px;margin: 0px auto;">
				<image :src="products.pic" mode="" style="width: 160px;height: 160px;"></image>
			</view>

			<view class="" style="margin-top: 17px;">
				<text style="font-size: 14px;">长按二维码添加客服为您牵线</text>
			</view>
		</view>

		<view v-if="seen" style="bottom: 0px;margin-top: 40px;">
			<button type="default" @click="out()" style="margin: 0px 10px; color: #4D4D4D;">退出登录</button>
		</view>
	</view>
</template>


<script>
import helper from '../../common/helper.js';
export default {
	data() {
		return {
			seen: true,
			products: {},
			id: "",
			type: "",
			seens: false,
			is_rz: false,
			realname: ""

		}
	},
	onShow() {
		// 先检查登录状态，通过后再执行后续逻辑
		this.checkGuide();

	},
	onLoad(options) {


		//     //获取URL
		//  let url = location.href;
		//  //声明参数字典
		//  let requestDic = {};
		//  //确定URL中包含 ？ 
		//  if (url.indexOf("?") !== -1){
		//   //返回 ？ 后面的字符串
		//   let str = url.substr(url.indexOf("?") + 1);
		//   //通过 & 符号分割字符串，获取参数数组
		//   let strArray = str.split("&");
		//   //遍历参数数组
		//   for (let i = 0; i < strArray.length; i++){
		//    //把遍历到的每一个元素再以 = 分割，分割后第0为作为key，第一位作为value 存放到字典中
		//    requestDic[strArray[i].split("=")[0]] = decodeURI(strArray[i].split("=")[1]);
		//   }
		//  }

		//  if(!requestDic.id || 0 === requestDic.id.length){
		// this.seen=true;
		//  }else{
		//   this.id=requestDic.id
		//  }

		// 先检查登录状态，通过后再执行后续逻辑
		this.checkGuide(() => {
			this.getinfo();
			this.renzheng();
		});
	},

	methods: {
		//退出
		out() {
			setTimeout(() => {
				uni.clearStorage()
				this.$router.go(0)
				uni.navigateTo({
					url: "/pagesA/login/login"
				})

			}, 400)
		},
		//登录
		denglu() {
			//判断是不否是微信浏览器登录
			// let status = navigator.userAgent.toLowerCase();
			// if (status.match(/MicroMessenger/i) == "micromessenger") {
			// 	window.location.href ="https://ds.kzjpht.com/index/Jsapi/index";
			// }else{
			// 	uni.navigateTo({
			// 	    url: '/pages/login/login'
			// 	});
			// }
		},

		my_team() {
			this.checkGuide('/pagesA/my/tools/my_team'); // 检查是否登录
			// uni.showToast({
			// 	title: '敬请期待！',
			// 	duration: 2000,
			// 	icon: 'none'
			// })
			uni.navigateTo({
				url: "/pagesA/my/tools/my_team?id=" + this.id
			})
		},

		async apply_hn() {
			this.checkGuide('/pagesA/my/tools/apply_hn_rule'); // 检查是否登录
			if (!this.is_rz) {
				uni.showToast({
					title: '请先实名认证',
					duration: 2000,
					icon: 'none'
				})
				return;
			}
			const res = await this.$myRuquest({
				url: '/index/api/is_exist_apply?uid=' + this.id
			})
			if (res.data.code == 200) {
				if (!res.data.data.last_apply_exists) {
					uni.navigateTo({
						url: "/pagesA/my/tools/apply_hn_rule"
					})
				} else if (res.data.data.status != 1) {
					uni.navigateTo({
						url: "/pagesA/my/tools/apply_hn_status?status=" + res.data.data.status
					})
				}
				console.log(res.data.data);
			}
		},

		// 提现
		tixian() {
			this.checkGuide('/pagesA/my/tools/tixian');//检查是否登录

			uni.navigateTo({
				url: "/pagesA/my/tools/tixian"
			})
		},
		//喜欢我的
		love_me() {
			this.checkGuide('/pagesA/my/tools/love_me');//检查是否登录

			uni.navigateTo({
				url: "/pagesA/my/tools/love_me?id=" + this.id
			})

		},
		//喜欢我的
		love_each() {
			this.checkGuide('/pagesA/my/tools/love_each');//检查是否登录

			uni.navigateTo({
				url: "/pagesA/my/tools/love_each?id=" + this.id
			})

		},
		//我喜欢的
		love_he() {
			this.checkGuide('/pagesA/my/tools/love_he');//检查是否登录
			uni.navigateTo({
				url: "/pagesA/my/tools/love_he?id=" + this.id
			})
		},
		//往期活动
		love_huodong() {
			this.checkGuide('/pagesA/my/huodong/huodong');//检查是否登录
			uni.switchTab({
				url: "/pagesA/huodong/huodong"
			})
		},

		//资料编辑
		zl_edit() {
			this.checkGuide('/pagesA/my/tools/zl_edit');//检查是否登录
			uni.navigateTo({
				url: "/pagesA/my/tools/zl_edit?id=" + this.id
			})

		},
		//实名认证
		zl_rz() {
			this.checkGuide('/pagesA/my/tools/certification');//检查是否登录
			uni.navigateTo({
				url: "/pagesA/my/tools/certification?id=" + this.id
			})
		},
		//专属红娘
		zl_hn() {
			this.checkGuide('/pagesA/my/tools/zl_hn');//检查是否登录
			uni.navigateTo({
				url: "/pagesA/my/tools/zl_hn?id=" + this.id
			})

		},
		//匹配需求
		zl_pp() {
			this.checkGuide('/pagesA/my/tools/zl_pp');//检查是否登录
			uni.navigateTo({
				url: "/pagesA/my/tools/zl_pp?id=" + this.id
			})
		},
		//红娘海报
		hn_haibao() {
			this.checkGuide('/pagesA/my/tools/hn_haibao');//检查是否登录
			uni.navigateTo({
				url: "/pagesA/my/tools/hn_haibao?id=" + this.id
			})
		},

		//认证查询
		async renzheng() {
			var launch = uni.getStorageSync('my_info');
			const res = await this.$myRuquest({
				url: '/index/dsnv.activities/get_rz_info?id=' + launch.id
			})
			if (res.data.code == 200) {
				this.is_rz = true;
				this.realname = res.data.data.realname
				console.log(res.data.data.realname);

			} else {
				this.is_rz = false;
			}

		},

		//联系客服
		zl_kf() {
			this.seens = !this.seens
		},
		colse_weixin() {
			this.seens = false;
		},

		//海报
		zl_hb() {
			this.checkGuide('/pages/my/tools/haibao');//检查是否登录

			uni.navigateTo({
				url: "/pagesA/my/tools/haibao?id=" + this.id
			})

		},

		//VIP
		zl_vip() {
			this.checkGuide('/pages/my/tools/member');//检查是否登录

			uni.switchTab({
				url: "/pages/my/member"
			})
		},

		async getinfo() {
			var launch = uni.getStorageSync('my_info');
			const res = await this.$myRuquest({
				url: '/index/dsnv.activities/myinfo2',
				data: {
					"id": launch.id,
				},
			})

			if (res.data.code == 200) {
				this.products = res.data.data;
				this.type = res.data.data.type;
				this.id = res.data.data.id;
			}
		},

		//获取个人数据
		checkGuide() {

			// 	// 思路： 检测是否有启动缓存，如果没有，就是第一次启动，第一次启动就去 启动介绍页面
			const launchFlag = uni.getStorageSync('my_info');

			if (!launchFlag.id || 0 === launchFlag.id.length) {

				setTimeout(() => {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
				}, 1000)

				uni.showToast({
					title: '请先登录',
					duration: 2000,
					icon: 'none'
				})
				return false;
			} else {
				this.getinfo();
				this.renzheng();
			}
		},
	}
}
</script>

<style lang="scss">
.home {
	height: 850px;
	background-color: #F6F6F6;

	.myicon image {
		width: 40px;
		height: 40px;

	}

	.myicon2 image {
		width: 25px;
		height: 25px;
		margin-top: 5px;
	}

	//头像
	.header {

		background-color: #fff;
		margin-top: 30px;
		display: flex;
		height: 100px;

		margin-bottom: 10px;
		border-radius: 10px;

		.header_left {

			image {
				margin-left: 10px;
				margin-top: 10px;
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}
		}

		.header_right {
			width: 60%;
			margin-left: 5%;
			margin-top: 20px;
		}

		.header_rt {
			margin-left: 5%;
			margin-top: 45px;
		}


	}

	.middle {
		background-color: #fff;
		margin: 0 10px;
		display: flex;
		height: 90px;
		border-radius: 10px;
		text-align: center;

		.middle_c {
			margin-top: 10px;
			width: 33%;
		}

	}

	.zl_down {
		background-color: #fff;
		margin: 0 10px;
		height: 450px;
		border-radius: 10px;

		.zl_c {
			display: flex;
			padding-left: 20px;
			padding-top: 20px;

			.zl_c_d {
				margin-top: 6px;
				margin-left: 5px;
				width: 100%;
			}

			.zl_c_e {
				padding-right: 20px;
				margin-top: 8px;
			}
		}

	}

}
</style>